<template>
  <div class="slide-show" ref="slideHeight">
    <div class="slide-img">
      <transition name="slide-trans">
        <img id="img" v-if="isShow" :src="slides[nowIndex].src" @click="goParam(nowIndex)">
      </transition>
      <transition name="title-trans">
        <p v-if="isShow" class="bannerTitle">{{slides[nowIndex]['title']}}</p>
      </transition>
      <transition name="title-trans">
        <p v-if="isShow" class="bannerText">{{slides[nowIndex]['text']}}</p>
      </transition>
      <transition name="slide-trans-old">
        <img v-if="!isShow" :src="slides[nowIndex].src">
      </transition>
      <transition name="title-trans-old">
        <p v-if="!isShow" class="bannerTitle">{{slides[nowIndex]['title']}}</p>
      </transition>
      <transition name="title-trans-old">
        <p v-if="!isShow" class="bannerText">{{slides[nowIndex]['text']}}</p>
      </transition>
    </div>
    <ul class="slide-pages">
      <li :class="{on: index === nowIndex}" v-for="(item, index) in slides" @click="goto(index)"></li>
    </ul>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        nowIndex: 0,
        isShow: true,
        invTime: 5000,
        slides: [
          {
            src: require('../assets/banner_control.jpg'),
            /*title: "游戏互动",
             text: "黏性互动，导入更多客流"*/
          },
          {
            src: require('../assets/bannervci.jpg'),
            /*title: "云端控制",
             text: "连锁总部直控，缩减环节"*/
          },
          {
            src: require('../assets/bannerVc.jpg'),
            /*title: "多屏联动",
             text: "提升视觉观感，吸引更多关注"*/
          }
        ]
      }
    },
    computed: {
      prevIndex () {
        if (this.nowIndex === 0) {
          return this.slides.length - 1
        } else {
          return this.nowIndex - 1
        }
      },
      nextIndex () {
        if (this.nowIndex === this.slides.length - 1) {
          return 0
        } else {
          return this.nowIndex + 1
        }
      }
    },
    methods: {
      goParam(nowIndex){
        if (nowIndex === 0) {
          this.$router.push('/VirtualCloud');
        } else {
          this.$router.push('/');
        }
      },
      goto (index) {
        if (index - this.nowIndex === 0) {
          return;
        } else {
          this.isShow = false;
          setTimeout(() => {
            this.isShow = true;
            this.nowIndex = index;
            this.clear();
            this.run()
          }, 10)
        }
      },
      run () {
        this.invId = setInterval(() => {
          this.goto(this.nextIndex)
        }, this.invTime)
      },
      clear () {
        clearInterval(this.invId)
      }
    },
    mounted () {
      this.run();
    }
  }
</script>
<style scoped>
  .slide-trans-enter-active {
    transition: all 1s;
  }

  .slide-trans-enter {
    transform: translateX(100%);
  }

  .slide-trans-old-leave-active {
    transition: all 1s;
    transform: translateX(-100%);
  }

  .title-trans-enter-active {
    transition: all 1s;
  }

  .title-trans-enter {
    transform: translateX(500%);
    opacity: 1;
  }

  .title-trans-old-leave-active {
    transition: all 1.5s;
    transform: translateX(-500%);
    opacity: 0;
  }

  .slide-show {
    position: relative;
    width: 85%;
    margin: 0 auto;
    overflow: hidden;
  }

  .slide-img {
    width: 100%;
  }

  .slide-img img {
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }

  .slide-img img:first-child {
    position: relative;
  }

  .slide-pages {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-70px);
  }

  .slide-pages li {
    width: 14px;
    height: 14px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    display: inline-block;
    margin: 0 10px;
    cursor: pointer;
    background: transparent;
    border: 2px solid #f39800;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .slide-pages li.on {
    background: #fff;
    border: transparent;
  }

  .bannerTitle {
    position: absolute;
    top: 23%;
    left: 25%;
    color: #fff;
    font-size: 36px;
  }

  .bannerText {
    position: absolute;
    top: 35%;
    left: 25%;
    color: #fff;
    font-size: 26px;
  }
</style>
